<?php /*a:3:{s:59:"/www/wwwroot/adminmatrix.net/app/admin/view/index/user.html";i:1748500126;s:55:"/www/wwwroot/adminmatrix.net/app/admin/view/layout.html";i:1748498971;s:60:"/www/wwwroot/adminmatrix.net/app/admin/view/common/base.html";i:1748500819;}*/ ?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理 - Admin Matrix</title>
    <!-- 引入 layui -->
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <style>
        .matrix-content-iframe {
            width: 100%;
            height: 100%;
            border: none;
            background-color: #f5f5f5;
        }
        #content {
            position: relative;
            overflow: hidden;
        }
        /* 自定义样式 */
        .admin-header {
            height: 50px;
            background-color: #1E293B;
            color: white;
            display: flex;
            align-items: center;
            padding: 0 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .admin-logo {
            font-size: 18px;
            font-weight: bold;
            margin-right: 20px;
        }
        .admin-container {
            display: flex;
            height: calc(100vh - 50px);
        }
        .admin-sidebar {
            width: 80px;
            background-color: #1E293B;
        }
        .admin-content {
            flex: 1;
            overflow: auto;
            padding: 15px;
        }
    </style>
    <!-- 页面自定义样式 -->
    
</head>
<body class="h-screen overflow-hidden">
    <!-- 顶部导航栏 -->
    <header class="admin-header">
        <div class="admin-logo">Admin Matrix</div>
        <div style="flex: 1;"></div>
        <div style="display: flex; align-items: center; gap: 16px;">
            <span id="currentTime"></span>
            <span>欢迎，管理员</span>
        </div>
    </header>

    <div class="admin-container">
        <!-- 左侧菜单 -->
        <div class="admin-sidebar" id="menuTree">
            <!-- 菜单内容将通过JS动态加载 -->
        </div>
        
        <!-- 右侧内容区域 -->
        <div class="admin-content">
            
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">用户管理</div>
                <div class="layui-card-body">
                    <!-- 搜索表单 -->
                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">用户名</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="username" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">邮箱</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="email" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button type="submit" class="layui-btn" lay-submit lay-filter="search">
                                    <i class="layui-icon layui-icon-search"></i> 搜索
                                </button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                    
                    <!-- 操作按钮 -->
                    <div class="layui-btn-group" style="margin-bottom: 10px;">
                        <button class="layui-btn" id="addUser">
                            <i class="layui-icon layui-icon-add-1"></i> 添加用户
                        </button>
                        <button class="layui-btn layui-btn-danger" id="batchDel">
                            <i class="layui-icon layui-icon-delete"></i> 批量删除
                        </button>
                    </div>
                    
                    <!-- 数据表格 -->
                    <table id="userTable" lay-filter="userTable"></table>
                    
                    <!-- 表格操作列模板 -->
                    <script type="text/html" id="tableBar">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

        </div>
    </div>

    <!-- 引入 layui -->
    <script src="/static/layui/layui.js"></script>
    
    <script>
        // 更新当前时间
        function updateCurrentTime() {
            var now = new Date();
            var timeStr = now.getFullYear() + '-' + 
                          padZero(now.getMonth() + 1) + '-' + 
                          padZero(now.getDate()) + ' ' + 
                          padZero(now.getHours()) + ':' + 
                          padZero(now.getMinutes()) + ':' + 
                          padZero(now.getSeconds());
            document.getElementById('currentTime').textContent = timeStr;
        }
        
        function padZero(num) {
            return num < 10 ? '0' + num : num;
        }
        
        // 每秒更新一次时间
        setInterval(updateCurrentTime, 1000);
        updateCurrentTime();
        
        // 配置 layui
        layui.config({
            //  配置 Layui 第三方扩展组件存放的基础目录
            base: '/static/layui/modules/',  // 确保末尾有斜杠
        }).extend({
            matrixAdmin: 'matrixAdmin/matrixAdmin',
        });

        layui.use(['matrixAdmin'], function() {
            var matrixAdmin = layui.matrixAdmin;
            var $ = layui.$; // 正确引用 layui 的 jQuery
            
            matrixAdmin.render({
                menuTree:{
                    elem: '#menuTree',
                    url: "<?php echo url('/admin/system.permission/index'); ?>",
                    autoJump: false,  // 禁用自动跳转
                    defaultJump: false, // 禁用默认跳转
                    baseUrl: window.location.origin,
                    change: function(url, fullPath, ins) {
                        console.log("菜单点击:", url);
                        console.log("完整路径:", fullPath);
                        // 这里只高亮菜单，不进行跳转
                        return false; // 阻止默认跳转行为
                    }
                }
            });
        });
    </script>
    
    <!-- 页面自定义脚本 -->
    
<script>
layui.use(['table', 'form', 'layer'], function(){
    var table = layui.table,
        form = layui.form,
        layer = layui.layer;
    
    // 渲染表格
    table.render({
        elem: '#userTable',
        url: '/admin/index/userdata', // 这里应该是获取用户数据的接口
        page: true, // 开启分页
        limit: 10, // 每页显示的条数
        limits: [10, 20, 50, 100], // 每页条数的选择项
        cols: [[ // 表头
            {type: 'checkbox', fixed: 'left'},
            {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'},
            {field: 'username', title: '用户名', width: 120},
            {field: 'email', title: '邮箱', width: 180},
            {field: 'role', title: '角色', width: 100},
            {field: 'status', title: '状态', width: 100, templet: function(d){
                return d.status == 1 ? '<span class="layui-badge layui-bg-green">正常</span>' : '<span class="layui-badge">禁用</span>';
            }},
            {field: 'create_time', title: '创建时间', width: 180, sort: true},
            {field: 'last_login', title: '最后登录', width: 180},
            {fixed: 'right', title: '操作', toolbar: '#tableBar', width: 120}
        ]],
        response: {
            statusCode: 200 // 重新规定成功的状态码
        },
        parseData: function(res){ // res 即为原始返回的数据
            return {
                "code": res.code, // 解析接口状态
                "msg": res.msg, // 解析提示文本
                "count": res.data.total, // 解析数据长度
                "data": res.data.list // 解析数据列表
            };
        },
        // 模拟数据，实际应该从服务器获取
        data: [{
            "id": 1,
            "username": "admin",
            "email": "admin@example.com",
            "role": "管理员",
            "status": 1,
            "create_time": "2023-01-01 12:00:00",
            "last_login": "2023-06-15 08:30:00"
        }, {
            "id": 2,
            "username": "user1",
            "email": "user1@example.com",
            "role": "编辑",
            "status": 1,
            "create_time": "2023-02-15 10:20:00",
            "last_login": "2023-06-14 16:45:00"
        }, {
            "id": 3,
            "username": "user2",
            "email": "user2@example.com",
            "role": "普通用户",
            "status": 0,
            "create_time": "2023-03-20 14:30:00",
            "last_login": "2023-05-30 09:15:00"
        }]
    });
    
    // 监听表格工具条
    table.on('tool(userTable)', function(obj){
        var data = obj.data;
        if(obj.event === 'edit'){
            layer.msg('编辑用户：' + data.username);
            // 这里应该弹出编辑表单
        } else if(obj.event === 'del'){
            layer.confirm('确定删除用户：' + data.username + '？', function(index){
                obj.del(); // 删除对应行（tr）的DOM结构
                layer.close(index);
                // 向服务端发送删除指令
                layer.msg('删除成功');
            });
        }
    });
    
    // 添加用户按钮点击事件
    $('#addUser').on('click', function(){
        layer.msg('添加用户');
        // 这里应该弹出添加表单
    });
    
    // 批量删除按钮点击事件
    $('#batchDel').on('click', function(){
        var checkStatus = table.checkStatus('userTable');
        var data = checkStatus.data;
        if(data.length === 0){
            layer.msg('请选择要删除的用户');
            return;
        }
        layer.confirm('确定删除选中的 ' + data.length + ' 个用户？', function(index){
            // 向服务端发送删除指令
            layer.msg('批量删除成功');
            layer.close(index);
        });
    });
    
    // 监听搜索表单提交
    form.on('submit(search)', function(data){
        table.reload('userTable', {
            where: data.field
        });
        return false; // 阻止表单跳转
    });
});
</script>

</body>
</html> 